<template>
  <div>
    <h1>科室</h1>
    <el-form :inline="true" :model="listReq" class="demo-form-inline">
      <el-form-item label="科室名称">
        <el-input v-model="listReq.name" placeholder="科室名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="departmentList">
      <el-table-column label="序号" prop="departmentId" width="120"/>
      <el-table-column label="医院名称" prop="departmentName" :show-overflow-tooltip="true" width="150"/>
      <el-table-column label="医师人数" prop="inquiryCount" :show-overflow-tooltip="true" width="150"/>
      <el-table-column label="问诊次数" prop="doctorNum" :show-overflow-tooltip="true" width="150"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button type="text" @click="showDoctorType(scope.row.departmentId)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        :current-page.sync="listReq.pageNum"
        :page-sizes="[3, 5, 10, 20]"
        :page-size="listReq.pageSize"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>

    <!--    医师级别弹出框-->
    <el-dialog title="医师等级" :visible.sync="dialogVisible" width="80%" :before-close="handleClose">

      <el-form :inline="true" :model="typeListReq" class="demo-form-inline">
        <el-form-item label="等级名称">
          <el-input v-model="typeListReq.name" placeholder="等级名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmitType">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="typeLoading" :data="doctorTypeList">
        <el-table-column label="序号" prop="doctorTypeId" width="120"/>
        <el-table-column label="医院等级" prop="doctorTypeName" :show-overflow-tooltip="true" width="150"/>
        <el-table-column label="医师人数" prop="inquiryCount" :show-overflow-tooltip="true" width="150"/>
        <el-table-column label="问诊次数" prop="doctorNum" :show-overflow-tooltip="true" width="150"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" @click="toDoctor(scope.row)">查看医师</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="doctorTypeSizeChange"
          :current-page.sync="typeListReq.pageNum"
          :page-sizes="[3, 5, 10, 20]"
          :page-size="typeListReq.pageSize"
          layout="sizes, prev, pager, next"
          :total="typeListReq.total">
        </el-pagination>
      </div>
    </el-dialog>

  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {departmentList, doctorTypeList} from "@/api/manage/doctor";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      dialogVisible: false,
      doctorTypeList: [],
      departmentList: [],
      loading: true,
      typeLoading: true,
      //分页
      listReq: {
        pageSize: 3,
        pageNum: 1,
        name: "",
        id: null
      },
      typeListReq: {
        pageNum: 1,
        pageSize: 3,
        name: "",
        id: null,
        childrenId: null,
        total: null
      },
      total: null
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    toDoctor(doctorType){
        this.$router.push({path:'/manage/doctor/doctorList',query:{doctorTypeId:doctorType.doctorTypeId,hospitalId:this.$route.query.hospitalId,departmentId:this.typeListReq.childrenId}})
    },
    onSubmit() {
      this.getDepartmentList();
    },
    onSubmitType() {
      this.getDoctorTypeList();
    },
    getDepartmentList() {
      this.listReq.id = this.$route.query.hospitalId;
      departmentList(this.listReq).then(res => {
        this.listReq.pageNum = res.data.pageNum
        this.listReq.pageSize = res.data.pageSize
        this.total = res.data.total
        this.departmentList = res.data.list
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.listReq.pageSize = val
      this.getDepartmentList();
    },
    doctorTypeSizeChange(val) {
      this.typeListReq.pageSize = val;
      this.getDoctorTypeList();
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.typeListReq = {
            pageNum: 1,
            pageSize: 3,
            name: "",
            id: null,
            childrenId: null,
            total: null
          }
          done();
        })
        .catch(_ => {
        });
    },
    showDoctorType(departmentId) {
      this.typeListReq.id = this.$route.query.hospitalId;
      this.typeListReq.childrenId = departmentId;
      this.dialogVisible = true;
      this.getDoctorTypeList();
    },
    getDoctorTypeList() {
      doctorTypeList(this.typeListReq).then(res => {
        this.typeListReq.pageNum = res.data.pageNum
        this.typeListReq.pageSize = res.data.pageSize
        this.typeListReq.total = res.data.total
        this.doctorTypeList = res.data.list
        this.typeLoading = false
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getDepartmentList();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, //生命周期 - 更新之后",
  beforeDestroy() {
  }, //生命周期 - 销毁之前",
  destroyed() {
  }, //生命周期 - 销毁完成",
  activated() {
  } //如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
